<template>
    <div>
        <el-card style="margin:20px 30px 0">
            <template #header>
                <el-button type="primary" size="small" icon="el-icon-plus" @click="updateTm()">添加</el-button>
            </template>

            <el-table border stripe :data="pageList" style="margin:0 0 30px">
                <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
                <el-table-column label="品牌名称" prop="tmName"></el-table-column>
                <el-table-column label="品牌LOGO">
                    <template v-slot="{ row, column, $index }">
                        <el-image :src="row.logoUrl" fit="fill" :lazy="true" style="width:100px;"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template v-slot="{ row, column, $index }">
                        <el-button type="warning" size="small" @click="updateTm(row)"
                            icon="el-icon-edit-outline"></el-button>
                        <el-button type="danger" size="small" @click="deleteTm(row)"
                            icon="el-icon-delete-solid"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                :page-sizes="[3, 5, 10]" :page-size="limit" layout=" prev, pager, next, jumper,->, sizes,total"
                :total="total">
            </el-pagination>

        </el-card>

        <!-- 弹窗 -->
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible" top="0" :title="`添加品牌`" width="50%">

            <el-form label-width="100px">
                <el-form-item label="品牌名">
                    <el-input v-model="tmForm.tmName"></el-input>
                </el-form-item>
                <el-form-item label="品牌LOGO">
                    <!-- <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" list-type="picture-card" :limit="1">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon el-upload:hover"></i>
                    </el-upload> -->
                    <el-upload :action="`${baseUrl}/admin/product/upload`" list-type="picture-card" class="avatar-uploader"
                        :before-upload="beforeAvatarUpload" :on-success="handlesuccess">
                        <!-- <i v-if="tmForm.logoUrl" class="el-icon-plus"></i> -->
                        <img width="100%" :src="tmForm.logoUrl"
                            style="width: 100%;height: 100%;display: block;margin-bottom: 5px;" alt="">
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="tmForm.logoUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item>
                    <span style="font-size:12px">上传的图片必须是jpg且不能大于2M</span>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addTradmarkS">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import tmApi from '@/api/trademark'
export default {
    name: 'Trademark',
    data() {
        return {
            page: 1,// 当前页
            limit: 5,// 页大小
            pageList: [],// 分页列表
            total: 0,// 数据总数
            dialogFormVisible: false,// 控制弹窗
            dialogVisible: false,
            dialogImageUrl: '',
            tmForm: {
                tmName: '',
                logoUrl: '',
            },
            // 环境路径
            baseUrl: process.env.VUE_APP_BASE_API,
        }
    },
    methods: {
        // 获取品牌列表
        async getPageList() {
            let { page, limit } = this
            const res = await tmApi.getPageList({ page, limit })
            console.log(res);
            if (res.code === 200) {
                this.pageList = res.data.records
                this.total = res.data.total
            }
        },
        // 上传成功
        handleAvatarSuccess(response, file, fileList) {
            console.log(response, file, fileList);
            // this.tmForm.logoUrl = file
            // if (fileList.length > 1) {
            //     fileList.length = 1
            // }
            // fileList.length = 1
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        // 点击页码
        handleSizeChange(val) {
            this.limit = val
            this.getPageList()
        },
        // 页码改变
        handleCurrentChange(val) {
            this.page = val
            this.getPageList()
        },
        // 上传成功
        handlesuccess(response, file, fileList) {
            // console.log(response, file, fileList);
            this.tmForm.logoUrl = fileList[0].response.data
        },
        // 点击保存
        async addTradmarkS() {
            // 获取到我们需要的数据
            let trandForm = this.tmForm
            console.log(trandForm);
            let res;
            // 判断是否有id
            if (trandForm.id) {
                res = await tmApi.updateTrademark(trandForm)
            } else {
                res = await tmApi.saveTrademark(trandForm)
            }
            if (res.code === 200) {
                // 成功之后关闭弹窗
                this.dialogFormVisible = false
                // 提示
                this.$message({
                    message: `${trandForm.id ? '修改' : '添加'}成功`,
                    type: 'success'
                });
                // 关闭并且我们的分页列表重新获取
                await this.getPageList()
            }

        },
        // 修改
        updateTm(row) {
            this.dialogFormVisible = true
            // 每次进入都先把上一次的数据清空
            this.$set(this.tmForm, 'tmName', '')
            this.$set(this.tmForm, 'logoUrl', '')
            // 判断是否有row
            if (row) {
                // 有row就把row赋值给我们的数据
                this.tmForm = { ...row }
                console.log(this.tmForm);
            }
        },
        // 点击删除
        async deleteTm(row) {
            const res = await tmApi.deleteTrademark(row.id)
            if (res.code === 200) {
                this.$message({
                    message: `删除成功失败`,
                    type: 'success'
                });
            } else {
                this.$message({
                    message: `删除成功失败`,
                    type: 'error'
                });
            }
            // 关闭并且我们的分页列表重新获取
            await this.getPageList()

        }

    },
    mounted() {
        this.getPageList()
    },
}
</script>

<style scoped>
.avatar-uploader {
    background-color: #fff;
}

.avatar-uploader .el-upload {
    position: absolute;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
